<script setup>
    const {
        title,
        value,
        txtShow,
        txt
    } = defineProps({
        title: {
            type: String,
            default: () => {
                return '标题'
            }
        },
        value: String | Number,
        txt: String,
        txtShow: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    })


    // 定义 父组件的自定义事件 相当于v2的 this.$emit('change')
    const emit = defineEmits('change')

    const change = (e) => {
       let target = e.target || e.srcElement;
       emit('change',target.value)
    }
</script>

<template>
    <div class="form-item">
        <div class="item-label">
            {{ title }}
        </div>
        <div class="item-input">
            <input type="text" :value="value" @keyup="change">
        </div>
        <div class="item-text" v-if="txtShow">
            {{ txt }}
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .form-item{
        width: 100%;
        display: flex;
        height: 40px;
        line-height: 40px;
        .item-label{
            width: 20%;
            text-align: right;
        }   
        .item-input{
            width: 50%;
            margin-left: 5%;
            input{
                width: 100%;
                outline: none;
                height: 30px;
                padding: 0 10px;
                border: 1px solid #e5e5e5;
                box-sizing: border-box;
            }
        }
        .item-text{
            width: 20%;
            margin-left: 3%;
        }
    }
</style>